<template>
  <div class="danmu-panel">
    <Collapse>
      <template #title>
        <div class="danmu-panel-title">
          <div>弹幕列表</div>
          <div class="iconfont icon-more"></div>
        </div>
      </template>
      <template #content>
        <div class="danum-list">
          <div class="danmu-title danmu-item">
            <div class="time">时间</div>
            <div class="content">弹幕内容</div>
            <div class="send-time">发送时间</div>
          </div>
          <el-scrollbar height="120px" :max-height="playerheight - 300">
            <NoData v-if="danmuList.length==0" msg="暂无弹幕"></NoData>
            <div v-else :class="['danmu-item',item.bid == selectDanmu.bid?'active':'' ]"
                 v-for="item in danmuList" @click="danmuStack(item)">
              <div class="time">{{proxy.Utils.formatPlayTime(item.time)}}</div>
              <div class="content">{{item.bnr}}</div>
              <div class="send-time">{{proxy.Utils.formatDateTime(item.cerData)}}</div>
            </div>
          </el-scrollbar>
        </div>
      </template>
    </Collapse>
  </div>
</template>
<script setup>
import Collapse from "@/components/Collapse.vue";
import {computed, getCurrentInstance, inject, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import NoData from "@/components/NoData.vue";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const playerheight = ref(500);
const danmuList = ref([]);

const selectDanmu = ref({});
const danmuStack = (item) => {
  selectDanmu.value = item;
  mitter.emit('playerCurrentTime',item.time)
}

onMounted(() => {
  mitter.on('loadDanmu', (data) => {
    data.sort((a, b) => {
      return a.time - b.time;
    })
    danmuList.value = data;
  })
  mitter.on('playerheight', (height) => {
    playerheight.value = height;
  })
});
onUnmounted(() => {
  mitter.off('loadDanmu');
  mitter.off('playerheight');
});
</script>
<style scoped lang="scss">
.danmu-panel {
  .danmu-panel-title {
    margin-left: 10px;
    display: flex;
    align-items: center;
    .icon-more {
      margin-left: 10px;
    }
  }
  .danum-list {
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    .danmu-item,.danmu-title {
      padding: 0 10px;
      cursor: pointer;
      color: #6d757a;
      display: flex;
      text-align: left;
      line-height: 25px;
      justify-content: space-between;
      .time {
        width: 50px;
        text-align: center;
      }
      .content{
        flex: 1;
        color: #333;
        text-align: center;
      }
      .send-time{
        width: 130px;
        text-align: center;
      }
      &:hover {
        background-color: #f1f2f3;
      }
    }
  }
  .active {
    background-color: #f1f2f3;
  }
}
</style>